<template>
    <div class="forum-comment">
        <el-dialog title="" :visible.sync="show" width="10rem">
            <h3>发新帖</h3>
            <el-select v-model="category_id" style="width: 100%;margin-bottom: 0.2rem;" placeholder="请选择">
                <el-option v-for="item in forumTypeList" :key="item.id" :label="item.title" :value="item.id">
                </el-option>
            </el-select>
            <el-input v-model="title" placeholder="请输入帖子标题" maxlength="45" show-word-limit style="margin-bottom: 0.2rem;"></el-input>
            <div class="upload-view" @click="uploadImageFun">
                <i class="el-icon-upload" v-if="!thumb"></i>
                <img v-else :src="thumb" alt="">
            </div>
            <el-input type="textarea" :rows="5" placeholder="请输入描述" v-model="description" maxlength="200" show-word-limit resize="none" style="margin-bottom: 0.2rem;">
            </el-input>
            <quill-editor ref="myQuillEditor" v-model="content" :options="editorOption" placeholder="请输入">
            </quill-editor>
            <div class="dialog-bottom">
                <div class="dialog-btn" @click="show = false">取消</div>
                <div class="dialog-btn dialog-success" @click="submitFun">发表</div>
            </div>
        </el-dialog>

        <Upload key="upload" ref="upload" @success="successUploadFun"></Upload>
    </div>
</template>

<script>
import { getForumType,addForum } from "@/api/forum";
import Upload from "./upload.vue"

import { quillEditor,Quill  } from 'vue-quill-editor' // 调用编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import Video from "@/utils/quillVideo";
Quill.register(Video, true);

// 工具栏配置
const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
    ['blockquote', 'code-block'], // 引用  代码块-----['blockquote', 'code-block']
    [{ header: 1 }, { header: 2 }], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
    [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
    [{ script: 'sub' }, { script: 'super' }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
    [{ indent: '-1' }, { indent: '+1' }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
    [{ 'direction': 'rtl' }], // 文本方向-----[{'direction': 'rtl'}]
    [{ size: ['small', false, 'large', 'huge'] }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
    [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
    [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
    [{ font: [] }], // 字体种类-----[{ font: [] }]
    [{ align: [] }], // 对齐方式-----[{ align: [] }]
    ['clean'], // 清除文本格式-----['clean']
    ['link', 'image', 'video'] // 链接、图片、视频-----['link', 'image', 'video']
]


export default {
    components: {
        quillEditor,Upload
    },
    data() {
        return {
            editorOption: {
                modules: {
                    toolbar: {
                        container: toolbarOptions,
                        handlers: {
                            image: this.handleImgUpload,
                            video: this.handleVideoUpload
                        }
                    }
                }
            },
            show: false,
            content: '',
            category_id: '',
            title: '',
            thumb:'',
            description: '',
            forumTypeList: [],
        }
    },
    mounted() {
        this.getForumTypeFun()
    },
    methods: {
        open() {
            this.show = true
        },
        submitFun() {
            if(this.category_id == ''){
                return this.$message.error('请选择分类')
            }
            if(this.title == ''){
                return this.$message.error('请输入标题')
            }
            if(this.description == ''){
                return this.$message.error('请输入描述')
            }
            if(this.content == ''){
                return this.$message.error('请输入内容')
            }
            addForum({
                category_id: this.category_id,
                title: this.title,
                thumb: this.thumb,
                description: this.description,
                content: this.content
            }).then(res=>{
                if(res.code == 200){
                    this.$message.success('添加成功')
                    this.show = false
                    this.$emit('submit')
                }else {
                    this.$message.error(res.msg)
                }
            })
        },
        getForumTypeFun() {
            getForumType().then(res => {
                if (res.code == 200) {
                    this.forumTypeList = res.data
                }
            })
        },
        uploadImageFun(){
            this.$refs.upload.options({
                type:'image', 
                event:'successUploadThumbFun',
            })
        },
        successUploadThumbFun(data,type){
            this.thumb = data.path
        },
        handleImgUpload(){
            this.$refs.upload.options({
                type:'image',
                event:'successUploadQuillFun'
            })
        },
        handleVideoUpload(){
            this.$refs.upload.options({
                type:'video',
                event:'successUploadQuillFun'
            })
        },
        successUploadFun(data,type,event){
            this[event](data,type)
        },
        successUploadQuillFun(data,type){
            let quill = this.$refs.myQuillEditor.quill;
            // 获取光标所在位置
            let length = quill.getSelection().index;
            // 插入图片，res为服务器返回的图片链接地址
            if(type == 'image'){
                quill.insertEmbed(length, "image",data.path);
            }else if(type == 'video'){
                quill.insertEmbed(length, "video",data.path);
            }
            // 调整光标到最后
            quill.setSelection(length + 1);
        }
    }
}
</script>

<style lang="less">
.ql-toolbar.ql-snow,.ql-container.ql-snow{
    border: 1px solid #DCDFE6;
}
</style>

<style lang="less" scoped>
.forum-comment {
    /deep/.el-dialog {
        border-radius: 0.1rem;
    }

    /deep/.el-dialog__body {
        padding: 0.875rem 0.625rem;
        ;
    }

    /deep/.el-dialog__header {
        display: none;
    }

    h3 {
        font-size: 0.3125rem;
        color: #333;
        font-weight: 600;
        margin: 0 0 0.375rem 0;
    }

    p {
        margin: 0 0 0.375rem 0;
        font-size: 0.2rem;
        color: #9695A3;
    }

    .upload-view{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 1.875rem;
        height: 1.875rem;
        border: 0.0125rem solid #DCDFE6;
        border-radius: 0.05rem;
        cursor: pointer;
        margin-bottom: 0.1875rem;
        font-size: 0.5rem;
        color: #9695A3;
        img{
            width: 100%;
            height: 100%;
            border-radius: 0.05rem;
        }
    }

    .dialog-bottom {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 0.6rem;

        .dialog-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 1.5rem;
            height: 0.5rem;
            background: #FFFFFF;
            border-radius: 0.1rem;
            border: 0.0125rem solid #9FA6C2;
            font-size: 0.2rem;
            color: #000;
            cursor: pointer;
            user-select: none;
            margin: 0 0.125rem;
        }

        .dialog-success {
            background: #4F8AF8;
            color: #fff;
            border-color: #4F8AF8;
        }
    }
}
</style>